<template>
	<div class="loginVue">
		<div class="login-container">
			<div class="login-content">
					<div class="login-title">{{$setting.login_name}}</div>
					<div class="login-name login-input">
						<input 
							type="text" 
							name="username" 
							v-model="login.username" 
							autocomplete="off"
						/>
						<span 
							class="placeholder" 
							:class="{fixed: login.username != '' && login.username != null}">
							请输入用户名（手机号）
						</span>
					</div>
					<div class="login-password login-input">
						<input 
							type="password" 
							name="password" 
							v-model="login.password" 
							autocomplete="off"
						/>
						<span 
							class="placeholder" 
							:class="{fixed: login.password != '' && login.password != null}">
							请输入密码
						</span>
					</div>
					<div class="login-captcha login-input">
						<input 
							type="text" 
							v-model="login.captcha"
							@keyup.enter="loginMet"
							placeholder="请输入验证码"
						>
						<div class="captchaShow" @click="reloadImg">
							<!--请求验证码-->
							<img :src="imgUrl" alt="" />
						</div>
					</div>
					<div class="buttonDiv">
						<el-button 
							:disabled="login.captcha == ''"
							type="primary" 
							@click="loginMet">
							登录
						</el-button>
					</div>
			</div>
			<p class="copyright">{{$setting.project_team}}</p>
		</div>
	</div>
</template>
<script type="text/javascript">
	import { mapState,mapActions } from 'pinia'
	import userStore  from '@/store/user.js'
	export default{
		data () {
			return {
				login:{
					username:"admin",
					password:"123456",
					captcha:"",
				},
				imgUrl:"https://html5iq.oss-cn-beijing.aliyuncs.com/ebtech/validateCode.jpeg"
			}
		},
		mounted (){
			//console.log('preload',`${window.preload.dirname}src`);
			// window.preload.doThing().then(result => {
			// 	console.log(result);
			// });
			//console.log(import.meta.env.MODE);
			//console.log(this.info.name);
        },
		computed: {
			...mapState(userStore, ['info'])
		},
        watch:{
            
        },
		components : {
			
		},
		methods : {
			...mapActions(userStore, ['saveUserInfo']),
			loginMet(){
				//存储用户信息
				//this.saveUserInfo({});
				//this.$store.commit("USERINFO",{});
				//登陆成功，将用户信息存储到cookie，临时简单解决方案
				localStorage.setItem('isLoginSuc','yes');
				//document.cookie = 'isLoginSuc' + "=" + "yes";
				this.$router.push("/panel");
			},
			reloadImg(){
				//生成一个随机数（防止缓存）
				var num = Math.ceil( Math.random() * 10000);
                this.imgUrl = this.imgUrl + "?" + num;
			}
		}
	}
</script>
<style type="text/css" lang="less" scoped>
	@gradient-color: #3788ee;
	@bg-color: #f7f8fa;
	@title-color:#3a3a3a;
	@text-color: #7e7e7e;
	@placeholder-color: #7e7e7e;
	.loginVue {
		text-align: center;
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		background: @bg-color;
		.login-container {
			width: 320px;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			.login-content {
				letter-spacing: 2px;
				background: #FFF;
				padding: 70px 30px 20px;
				box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.06);
				border-radius: 3px;
				box-sizing: border-box;
				>div {
					margin: 30px 0;
					&.login-input {
						position: relative;
						.placeholder {
							position: absolute;
							color: @placeholder-color;
							top: 6px;
							font-size: 16px;
							transition: all .2s;
							left: 0;
							pointer-events: none;
						}
						input {
							font-size: 16px;
							padding: 8px 0;
							height: 40px;
							width: 100%;
							border: none;
							border-radius: 0;
							border-bottom: 1px solid #d3d3d3;
							box-shadow: inset 0 0 0 1000px #fff;
							outline: none;
							box-sizing: border-box;
							transition: .3s;
							font-weight: 200;
							&:focus {
								border-bottom-color: @gradient-color;
								box-shadow: inset 0 0 0 1000px #fff;
							}
						}
						input:focus + .placeholder, .placeholder.fixed{
							font-size: 13px;
							top: -16px;
						}
						input:-webkit-autofill + .placeholder {
							font-size: 13px;
							top: -16px;
						}
					}
				&.login-title {
					font-size: 30px;
					color: @title-color;
					line-height: 1;
					margin: -16px 0px 40px;
					font-weight: 200;
				}
				&.login-captcha{
					overflow: hidden;
					input{
						width: 60%;
						float: left;
					}
					.captchaShow{
						float: left;
						width: 40%;
						cursor: pointer;
						margin-top: 10px;
						cursor:pointer;
					}
				}
			}
			> .buttonDiv {
					margin-top: 45px;
					.h-btn {
					padding: 12px 0;
					font-size: 18px;
					opacity: .8;
					border-radius: 3px;
					background: @gradient-color;
					border-color: @gradient-color;
						&:hover {
							opacity: 1;
							background: @gradient-color;
							border-color: @gradient-color;
						}
					}
					.el-button{
						width: 100%;
					}
				}
			}
			.copyright {
				letter-spacing: 1px;
				margin-top: 50px;
				color: @text-color;
				font-size: 12px;
				a{
					color: @text-color;
				}
			}
		}
	}
</style>